<div class="gt-break-word gt-second-line-indent"
     style="font-size: 18px; margin-bottom: 10px;">
  <strong>{{headline}}</strong>
  {{#if showExport}}
    <button class="gt-flat-btn gt-flat-btn-big gt-link-color download-trace"
            style="margin: -6px 0 -6px 16px;">
      <i class="fas fa-cloud-download-alt" title="Download trace"></i>
    </button>
  {{/if}}
</div>
{{#if active}}
  <div>
    <strong>ACTIVE</strong>
  </div>
{{^}}
  {{#if partial}}
    <div>
      <strong>PARTIAL</strong>
    </div>
  {{/if}}
{{/if}}
{{#if error}}
  <div>
    <strong>ERROR</strong>
  </div>
{{/if}}
{{#if async}}
  <div>
    <strong>ASYNC</strong>
  </div>
{{/if}}
{{#if agent}}
  <div>
    <strong>{{agent}}</strong>
  </div>
{{/if}}
<div>
  <div class="gt-trace-attr-name">Transaction type:&nbsp;</div>
  <div class="gt-trace-attr-value">{{transactionType}}</div>
</div>
<div>
  <div class="gt-trace-attr-name">Transaction name:&nbsp;</div>
  <div class="gt-trace-attr-value">{{transactionName}}</div>
</div>
{{#if locationStackTraceElements}}
  <div>
    <div class="gt-trace-attr-name">Location stack trace:&nbsp;</div>
    <div style="display: table-cell; vertical-align: bottom;">
      <div class="d-inline-block gt-unexpanded-content gt-link-color gt-opensans"
           style="margin-top: -2px; margin-bottom: -2px;">
        {{firstLocationStackTraceElementHtml locationStackTraceElements}}</div>
      {{! using span so background will stretch beyond page border if needed }}
      <div class="d-inline-block gt-expanded-content gt-nowrap gt-with-clip d-none"
           style="overflow-x: auto;">
        <div class="gt-clip-text">
          {{{locationStackTraceHtml locationStackTraceElements}}}
        </div>
        <i class="fas fa-clipboard gt-clip"></i>
      </div>
    </div>
  </div>
{{/if}}
{{#if error}}
  <div>
    <div class="gt-trace-attr-name">Error:&nbsp;</div>
    <div class="gt-trace-attr-value">{{error.message}}</div>
    {{#if error.exception}}
      <div class="gt-trace-exception-indent">
        <span class="d-inline-block gt-unexpanded-content gt-link-color">exception</span>
        {{! using span so background will stretch beyond page border if needed }}
        <div class="d-inline-block gt-expanded-content gt-nowrap gt-with-clip d-none">
          <div class="gt-link-color">exception</div>
          <div class="gt-monospace gt-clip-text">
            {{{exceptionHtml error.exception}}}
          </div>
          <i class="fas fa-clipboard gt-clip"></i>
        </div>
      </div>
    {{/if}}
  </div>
{{/if}}
<div>
  <div class="gt-trace-attr-name">Start:&nbsp;</div>
  <div class="gt-trace-attr-value">{{date startTime}}</div>
</div>
<div>
  <div class="gt-trace-attr-name">Duration:&nbsp;</div>
  <div class="gt-trace-attr-value"><!--
    lack of space here is significant because of gt-pre-wrap (which is mixin to gt-trace-attr-value)
 -->{{nanosToMillis durationNanos}}{{#if active}}..{{^}}{{#if partial}}..{{/if}}{{/if}}&nbsp;milliseconds<!--
--></div>
</div>
{{#if user}}
  <div>
    <div class="gt-trace-attr-name">User:&nbsp;</div>
    <div class="gt-trace-attr-value">{{user}}</div>
  </div>
{{/if}}
{{#eachKeyValuePair attributes}}
  <div>
    <!-- note: surrounding div is for nicer copy paste result -->
    <div class="gt-trace-attr-name">{{key}}:&nbsp;</div>
    <div class="gt-trace-attr-value">{{value}}</div>
  </div>
{{/eachKeyValuePair}}
{{#if detail}}
  {{{headerDetailHtml detail}}}
{{/if}}
{{#if mainThreadRootTimer}}
  <div class="gt-timers">
    <div class="gt-timers-table">
      <table class="d-inline-block gt-trace-timer-table" style="border-spacing: 0;">
        <thead>
        <tr>
          <td class="gt-bold gt-breakdown-header" style="text-align: left;">
            Breakdown{{#if auxThreadRootTimer}} (Main Thread){{/if}}:
          </td>
          <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
          <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
        </tr>
        </thead>
        <tbody>
        {{#each mainBreakdown.flattenedTimers}}
          <tr class="align-top{{#unless show}} d-none{{/unless}}" id="mft{{id}}">
            <td style="text-align: left;">
              <div class="gt-indent2 gt-break-word gt-second-line-indent">
                {{name}}
              </div>
            </td>
            <td>{{nanosToMillis totalNanos}}{{#if active}}..{{/if}}</td>
            <td>{{formatInteger count}}</td>
          </tr>
        {{/each}}
        <tr class="align-top">
          <td colspan="3" style="text-align: left;">
            <div class="gt-indent2">
              <div style="margin-left: -6px;">
                <span tabindex="-1" id="mftForFocus"></span>
                <button class="gt-flat-btn gt-link-color{{#unless mainBreakdown.ftShowMore}} d-none{{/unless}}"
                        id="mftShowMore">
                  show more
                </button>
                <span class="d-none" id="mftShowMoreAndLess">/</span>
                <button class="gt-flat-btn gt-link-color d-none"
                        id="mftShowLess">
                  show less
                </button>
                <span{{#unless mainBreakdown.ftShowMore}} class="d-none"{{/unless}} id="mftShowAll">
                  /
                  <button class="gt-flat-btn gt-link-color">
                    show all
                  </button>
                </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div style="display: inline-block; vertical-align: top; margin-top: -1px;">
        <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color gt-timers-view-toggle">
          switch to tree view
        </button>
      </div>
    </div>
    <div class="d-none gt-timers-table">
      <table class="d-inline-block gt-trace-timer-table" style="border-spacing: 0;">
        <thead>
        <tr>
          <td class="gt-bold gt-breakdown-header" style="text-align: left;">
            Breakdown{{#if auxThreadRootTimer}} (Main Thread){{/if}}:
          </td>
          <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
          <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
        </tr>
        </thead>
        <tbody>
        {{#each mainBreakdown.timers}}
          <tr class="align-top{{#unless show}} d-none{{/unless}}" id="mtt{{id}}">
            <td style="text-align: left;">
              <div class="gt-indent2">
                <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}px;">
                  {{name}}{{#if extended}} (extended){{/if}}
                </div>
              </div>
            </td>
            <td>{{nanosToMillis totalNanos}}{{#if active}}..{{/if}}</td>
            <td>{{formatInteger count}}</td>
          </tr>
        {{/each}}
        <tr class="align-top">
          <td colspan="3" style="text-align: left;">
            <div class="gt-indent2">
              <div style="margin-left: -6px;">
                <span tabindex="-1" id="mttForFocus"></span>
                <button class="gt-flat-btn gt-link-color{{#unless mainBreakdown.ttShowMore}} d-none{{/unless}}"
                        id="mttShowMore">
                  show more
                </button>
                <span class="d-none" id="mttShowMoreAndLess">/</span>
                <button class="gt-flat-btn gt-link-color d-none"
                        id="mttShowLess">
                  show less
                </button>
                <span{{#unless mainBreakdown.ttShowMore}} class="d-none"{{/unless}} id="mttShowAll">
                  /
                  <button class="gt-flat-btn gt-link-color">
                    show all
                  </button>
                </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color gt-timers-view-toggle"
              style="vertical-align: top; margin-top: -1px;">
        switch to flattened view
      </button>
    </div>
  </div>
{{/if}}
{{#if auxThreadRootTimer}}
  <div class="gt-timers">
    <div class="gt-timers-table">
      <table class="d-inline-block gt-trace-timer-table" style="border-spacing: 0;">
        <thead>
        <tr>
          <td class="gt-bold gt-breakdown-header" style="text-align: left;">
            Breakdown{{#if mainThreadRootTimer}} (Auxiliary Threads){{/if}}:
          </td>
          <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
          <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
        </tr>
        </thead>
        <tbody>
        {{#each auxBreakdown.flattenedTimers}}
          <tr class="align-top{{#unless show}} d-none{{/unless}}" id="aft{{id}}">
            <td style="text-align: left;">
              <div class="gt-indent2 gt-break-word gt-second-line-indent">
                {{name}}
              </div>
            </td>
            <td>{{nanosToMillis totalNanos}}{{#if active}}..{{/if}}</td>
            <td>{{formatInteger count}}</td>
          </tr>
        {{/each}}
        <tr class="align-top">
          <td colspan="3" style="text-align: left;">
            <div class="gt-indent2">
              <div style="margin-left: -6px;">
                <span tabindex="-1" id="aftForFocus"></span>
                <button class="gt-flat-btn gt-link-color{{#unless auxBreakdown.ftShowMore}} d-none{{/unless}}"
                        id="aftShowMore">
                  show more
                </button>
                <span class="d-none" id="aftShowMoreAndLess">/</span>
                <button class="gt-flat-btn gt-link-color d-none"
                        id="aftShowLess">
                  show less
                </button>
                <span{{#unless auxBreakdown.ftShowMore}} class="d-none"{{/unless}} id="aftShowAll">
                  /
                  <button class="gt-flat-btn gt-link-color">
                    show all
                  </button>
                </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color gt-timers-view-toggle"
              style="vertical-align: top; margin-top: -1px;">
        switch to tree view
      </button>
    </div>
    <div class="d-none gt-timers-table">
      <table class="d-inline-block gt-trace-timer-table" style="border-spacing: 0;">
        <thead>
        <tr>
          <td class="gt-bold gt-breakdown-header" style="text-align: left;">
            Breakdown{{#if mainThreadRootTimer}} (Auxiliary Threads){{/if}}:
          </td>
          <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
          <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
        </tr>
        </thead>
        <tbody>
        {{#each auxBreakdown.timers}}
          <tr class="align-top {{#unless show}} d-none{{/unless}}" id="att{{id}}">
            <td style="text-align: left;">
              <div class="gt-indent2">
                <div class="gt-break-word gt-second-line-indent" style="margin-left: {{timerIndent .}}px;">
                  {{name}}{{#if extended}} (extended){{/if}}
                </div>
              </div>
            </td>
            <td>{{nanosToMillis totalNanos}}{{#if active}}..{{/if}}</td>
            <td>{{formatInteger count}}</td>
          </tr>
        {{/each}}
        <tr class="align-top">
          <td colspan="3" style="text-align: left;">
            <div class="gt-indent2">
              <div style="margin-left: -6px;">
                <span tabindex="-1" id="attForFocus"></span>
                <button class="gt-flat-btn gt-link-color{{#unless auxBreakdown.ttShowMore}} d-none{{/unless}}"
                        id="attShowMore">
                  show more
                </button>
                <span class="d-none" id="attShowMoreAndLess">/</span>
                <button class="gt-flat-btn gt-link-color d-none"
                        id="attShowLess">
                  show less
                </button>
                <span{{#unless auxBreakdown.ttShowMore}} class="d-none"{{/unless}} id="attShowAll">
                  /
                  <button class="gt-flat-btn gt-link-color">
                    show all
                  </button>
                </span>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <button class="gt-indent1 gt-flat-btn gt-flat-btn-big gt-link-color gt-timers-view-toggle"
              style="vertical-align: top; margin-top: -1px;">
        switch to flattened view
      </button>
    </div>
  </div>
{{/if}}
{{#if asyncTimers}}
  <div class="gt-timers">
    <div class="gt-timers-table">
      <table class="d-inline-block" style="border-spacing: 0;">
        <thead>
        <tr>
          <td class="gt-bold gt-breakdown-header" style="text-align: left;">
            Breakdown (Async Timers):
          </td>
          <td class="gt-breakdown-header" style="font-weight: 600;">total&nbsp;(ms)</td>
          <td class="gt-breakdown-header" style="font-weight: 600;">count</td>
        </tr>
        </thead>
        <tbody>
        {{#each asyncTimers}}
          <tr class="align-top">
            <td style="text-align: left;">
              <div class="gt-indent2 gt-break-word gt-second-line-indent">
                {{name}}
              </div>
            </td>
            <td>{{nanosToMillis totalNanos}}{{#if active}}..{{/if}}</td>
            <td>{{formatInteger count}}</td>
          </tr>
        {{/each}}
        </tbody>
      </table>
    </div>
  </div>
{{/if}}
{{#ifNotAllNA mainThreadStats}}
  <div class="gt-bold gt-breakdown-header">
    JVM Thread Stats{{#if auxThreadStats}} (Main Thread){{/if}}
  </div>
  {{#ifNotNA mainThreadStats/totalCpuNanos}}
    <div class="gt-indent2">
      <span>CPU time:</span>
      {{nanosToMillis mainThreadStats/totalCpuNanos}} milliseconds
    </div>
  {{/ifNotNA}}
  {{#ifNotNA mainThreadStats/totalBlockedNanos}}
    <div class="gt-indent2">
      <span>Blocked time:</span>
      {{nanosToMillis mainThreadStats/totalBlockedNanos}} milliseconds
    </div>
  {{/ifNotNA}}
  {{#ifNotNA mainThreadStats/totalWaitedNanos}}
    <div class="gt-indent2">
      <span>Waited time:</span>
      {{nanosToMillis mainThreadStats/totalWaitedNanos}} milliseconds
    </div>
  {{/ifNotNA}}
  {{#ifNotNA mainThreadStats/totalAllocatedBytes}}
    <div class="gt-indent2">
      <span>Allocated memory:</span>
      {{formatAllocatedBytes mainThreadStats/totalAllocatedBytes}}
    </div>
  {{/ifNotNA}}
{{/ifNotAllNA}}
{{#if auxThreadStats}}
  {{#ifNotAllNA auxThreadStats}}
    <div class="gt-bold gt-breakdown-header">
      JVM Thread Stats{{#if mainThreadStats}} (Auxiliary Threads){{/if}}
    </div>
    {{#ifNotNA auxThreadStats/totalCpuNanos}}
      <div class="gt-indent2">
        <span>CPU time:</span>
        {{nanosToMillis auxThreadStats/totalCpuNanos}} milliseconds
      </div>
    {{/ifNotNA}}
    {{#ifNotNA auxThreadStats/totalBlockedNanos}}
      <div class="gt-indent2">
        <span>Blocked time:</span>
        {{nanosToMillis auxThreadStats/totalBlockedNanos}} milliseconds
      </div>
    {{/ifNotNA}}
    {{#ifNotNA auxThreadStats/totalWaitedNanos}}
      <div class="gt-indent2">
        <span>Waited time:</span>
        {{nanosToMillis auxThreadStats/totalWaitedNanos}} milliseconds
      </div>
    {{/ifNotNA}}
    {{#ifNotNA auxThreadStats/totalAllocatedBytes}}
      <div class="gt-indent2">
        <span>Allocated memory:</span>
        {{formatAllocatedBytes auxThreadStats/totalAllocatedBytes}}
      </div>
    {{/ifNotNA}}
  {{/ifNotAllNA}}
{{/if}}
<br>
{{#ifExistenceYes entriesExistence}}
  <div>
    <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-entries-toggle">
      <span class="gt-link-color">Trace entries ({{entryCount}})</span>
    </button>
    {{! spinner is not used in export file }}
    <div>
      <div class="d-none gt-trace-detail-spinner"></div>
    </div>
  </div>
  <div id="checkThisForWidth" style="margin: 10px 0 0 1em;">
    <div id="entries" class="d-none" style="font-family: Cousine, monospace;"></div>
  </div>
{{/ifExistenceYes}}
{{#ifExistenceYes queriesExistence}}
  <div style="margin-top: 10px;">
    <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-queries-toggle">
      <span class="gt-link-color">Query stats ({{queryCount}})</span>
    </button>
    {{! spinner is not used in export file }}
    <div>
      <div class="d-none gt-trace-detail-spinner"></div>
    </div>
  </div>
  <div style="margin: 10px 0 0 1em;">
    <div id="queries" class="d-none"
         style="margin-top: -40px;">
      <table class="table gt-query-table"
             data-curr-sort-property="totalDurationNanos"
             data-curr-sort-direction="1">
        <thead>
        <tr>
          <th></th>
          <th class="gt-trace-query-total-column">
            <button class="gt-trace-query-sort-button"
                    data-sort-property="totalDurationNanos">
              Total<br>
              time<br>
              <span class="gt-caret"></span>
              (ms)
            </button>
          </th>
          <th class="gt-trace-query-other-column">
            <button class="gt-trace-query-sort-button"
                    data-sort-property="executionCount">
              Execution<br>
              <span class="gt-caret d-none"></span>
              count
            </button>
          </th>
          <th class="gt-trace-query-other-column">
            <button class="gt-trace-query-sort-button"
                    data-sort-property="timePerExecution">
              Time per<br>
              execution<br>
              <span class="gt-caret d-none"></span>
              (ms)
            </button>
          </th>
          <th class="gt-trace-query-rows-column">
            <button class="gt-trace-query-sort-button"
                    data-sort-property="rowsPerExecution">
              Rows per<br>
              <span class="gt-caret d-none"></span>
              execution
            </button>
          </th>
        </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
{{/ifExistenceYes}}
{{#ifExistenceYes profileExistence}}
  {{#if mainThreadProfileSampleCount}}
    <div style="margin-top: 10px;">
      <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-main-thread-profile-toggle">
        <span class="gt-link-color">{{#if auxThreadProfileSampleCount}}
          Main Thread {{/if}}Profile ({{mainThreadProfileSampleCount}})</span>
      </button>
      {{#if showExport}}
        <a href="{{flameGraphLink}}" style="padding-left: 2rem;" target="_blank">
          View flame graph <i class="fas fa-external-link-alt"></i>
        </a>
      {{/if}}
      {{! spinner is not used in export file }}
      <div>
        <div class="d-none gt-trace-detail-spinner"></div>
      </div>
    </div>
    <div style="margin: 10px 0;">
      <div class="gt-indent2 gt-nowrap d-none" id="mainThreadProfileOuter">
        <div style="padding-bottom: 10px;">
          <input class="form-control gt-profile-text-filter"
                 style="display: inline-block; width: 25em;"
                 placeholder="filter the profile tree"
                 aria-label="Profile tree filter">
        </div>

        <div class="gt-profile"></div>
      </div>
    </div>
  {{/if}}
  {{#if auxThreadProfileSampleCount}}
    <div style="margin-top: 10px;">
      <button class="gt-flat-btn gt-flat-btn-big-pad1aligned gt-aux-thread-profile-toggle">
        <span class="gt-link-color">Auxiliary Threads Profile ({{auxThreadProfileSampleCount}})</span>
      </button>
      {{#if showExport}}
        <a href="{{flameGraphLink}}&auxiliary=true" style="padding-left: 2rem;" target="_blank">
          View flame graph <i class="fas fa-external-link-alt"></i>
        </a>
      {{/if}}
      {{! spinner is not used in export file }}
      <div>
        <div class="d-none gt-trace-detail-spinner"></div>
      </div>
    </div>
    <div style="margin: 10px 0;">
      <div class="gt-indent2 gt-nowrap d-none" id="auxThreadProfileOuter">
        <div style="padding-bottom: 10px;">
          <input class="form-control gt-profile-text-filter"
                 style="display: inline-block; width: 25em;"
                 placeholder="filter the profile tree"
                 aria-label="Profile tree filter">
        </div>

        <div class="gt-profile"></div>
      </div>
    </div>
  {{/if}}
{{/ifExistenceYes}}
{{#ifAnyExistenceExpired .}}
  <div style="margin: 10px 0;">
    <strong>
      {{#theExpiredDetails .}}{{/theExpiredDetails}} for this trace have expired
    </strong>
  </div>
{{/ifAnyExistenceExpired}}
